import React,{useEffect, useState} from 'react';
import { ListItem } from '@/components'
import { history} from 'umi'
import  styles from './index.less'
import { Button, List, Toast, Icon, Picker } from 'antd-mobile';
import { regMap, storage,LOCALSTATE } from '@/utils';
import {fetchSubjectList} from '@/services/edu'
import { updateUser,fetchUserService } from '@/services/user'
import {userLogout} from '@/services/user'

const level = [
  { value: 1, label: '一级建筑师' },
  { value: 2, label: '一级结构工程师' },
  { value: 3, label: '一级造价工程师' },
  { value: 4, label: '给排水工程师' },
  { value: 5, label: '暖通工程师' },
  { value: 6, label: '电气工程师' },
  { value: 7, label: '城乡规划师' },
  { value: 8, label: '咨询工程师' }
]
function My(props) {
  const {
    userInfo={
      avatar:"https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png",
      nickname:'小白菜'
    },
    userLevel,
    wxUserInfo={},
    userName
  } =props;
  const [subjectList,setSubjectList] = useState([])
  const [grade,setgrade] = useState([userLevel])
  const init = async()=>{
    const res = await fetchSubjectList()
    if(res?.code===1){
      setSubjectList(res.response||[])
    }
  }
  useEffect(()=>{
    init()
  },[])
  const handleSelect = async(id)=>{
    console.log('props---',props)
    const res = await updateUser({...props,currentSubjectId:id})
    if(res.code===1){
      // Toast.success('选择成功',1,()=>{
      //   window.location.reload()
      // })
      fetchUser()
    }
    
  }
  const selectGrade = async(id)=>{
    console.log(id)
    
    const res = await updateUser({...props,userLevel:id[0]})
    if(res.code===1){
      setgrade(id)
      init()
      fetchUser()
      // props.cb()
    }
  }
  
  const fetchUser = async(hasReload=true)=>{
    const res = await fetchUserService()
    if(res?.code===1){
      storage.set(LOCALSTATE,res.response,true)
      if(hasReload){
        Toast.success('选择成功',1,()=>{
          window.location.reload()
        })
      }
      
      // Toast.success('登录成功', 1.5, () => window.location.href='/home');
    }
  }
  const unbindweChat = async()=>{
    const res = await userLogout()
    if(res?.code ===1){
      Toast.success('解绑成功',1,()=>{
        history.push('/login')
        // window.location.reload()
      })
    }
    
  }
  const cleanCache = async()=>{
    Toast.success('清理成功',1,()=>{
      window.location.reload()
    })
  }
  return (
    <div className={styles.page}>
      <div className={styles.header}>
        <div className={styles.logo}>
          <img src={userInfo.avatar} />
        </div>
        <div className={styles.mobile}>
          {props.realName}
        </div>
      </div>
      <div className={styles.main}>
      <Picker
            data={level}
            title="职业资格"
            extra="请选择(可选)"
            // cascade={false}
            cols={1}
            value={grade}
          onChange={selectGrade}
          onOk={selectGrade}
          >
            <List.Item arrow="horizontal"></List.Item>
          </Picker>
        <List renderHeader="课程选择">
          {
            subjectList.map(item=><List.Item key={item.id} extra={String(props.currentSubjectId)===item.id?<Icon type="check-circle-o"/>:<></>} onClick={()=>handleSelect(item.id)} arrow="horizontal">{item.name}</List.Item>)
          }
          {
            subjectList.length===0&&<List.Item>暂无课程</List.Item>
          }
          
        </List>
        <Button onClick={cleanCache} size="small">清理缓存</Button>

        <Button type="primary" onClick={unbindweChat} size="small">解绑微信</Button>
      </div>
      

    </div>
  );
}

export default My;
